<template>
  <div class="app-container">
    <div id="printBox">
      <div
        style="margin-bottom: 20px"
        v-for="item in printData"
        :key="item?.id"
      >
        <div :id="`printId_${item?.id || ''}`">
          <span style="font-size: 15px; font-weight: 100; margin-right: 20px"
            >表单编码：DKIA-SCM-033</span
          >

          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
            style="font-size: 18px; font-weight: 100; margin-right: 20px"
            >大连施奈莱克创新零部件有限公司</span
          >
          &nbsp;&nbsp;<span
            style="font-size: 20px; font-weight: 100; margin-right: 20px"
            >委外加工出库单</span
          >
          <br /><br />
          <span style="font-size: 18px; font-weight: 100; margin-right: 20px"
            >供应商名称：</span
          ><span style="font-size: 18px; font-weight: 100; margin-right: 20px"
            ><input type="checkbox" id="checkbox1" /> 大连永光</span
          >&nbsp;&nbsp;<span
            style="font-size: 18px; font-weight: 100; margin-right: 20px"
            ><input type="checkbox" id="checkbox1" /> 宽世电泳</span
          >&nbsp;&nbsp;<span
            style="font-size: 18px; font-weight: 100; margin-right: 20px"
            ><input type="checkbox" id="checkbox1" /> 宏升电泳</span
          >&nbsp;&nbsp;<span
            style="font-size: 18px; font-weight: 100; margin-right: 20px"
            ><input type="checkbox" id="checkbox1" /> 永光表面处理</span
          >&nbsp;&nbsp;<span
            style="font-size: 18px; font-weight: 100; margin-right: 20px"
            ><input type="checkbox" id="checkbox1" /> 其它</span
          >
          <br />
          <br />
          <span style="font-size: 18px; font-weight: 100; margin-right: 20px"
            >订单号： {{ item?.exteriorDeliveryCode || "&nbsp;" }}</span
          >
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="font-size: 18px; font-weight: 100; margin-right: 20px"
            >单据号</span
          >

          <table cellpadding="0" cellspacing="0">
            <tr>
              <td>
                <table
                  border="1"
                  cellpadding="5"
                  cellspacing="0"
                  width="800px"
                  style="height: 450px"
                >
                  <thead>
                    <tr>
                      <th rowspan="2">存货名称</th>
                      <th rowspan="2">规格型号</th>
                      <th rowspan="2">存货编码</th>
                      <th rowspan="2">单位</th>
                      <th colspan="2">数量</th>
                      <th style="width: 200px" rowspan="2">备注</th>
                    </tr>
                    <tr>
                      <th>请领</th>
                      <th>实发</th>
                    </tr>
                  </thead>
                  <tbody align="center">
                    <tr
                      v-for="(i, index) in item?.mesProduceTransferFormDTOSSum"
                      :key="index"
                    >
                      <td>{{ i?.figureNumber || "&nbsp;" }}</td>
                      <td>{{ i?.remarks || "&nbsp;" }}</td>
                      <td>
                        {{
                          (i?.materialCode || "&nbsp;") +
                          (i?.shiftName ? "  " + i?.shiftName : "")
                        }}
                      </td>
                      <td>
                        {{ i?.unitName || "&nbsp;" }}
                      </td>
                      <td>{{ i?.productQuantity || "&nbsp;" }}</td>
                      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td
                        colspan="7"
                        style="text-align: left; font-weight: bold"
                      >
                        合计
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td>
                <table
                  border="1"
                  cellpadding="5"
                  cellspacing="0"
                  width="150px"
                  style="height: 450px"
                >
                  <tr>
                    <td style="border-left: none">第一联存根</td>
                    <td style="border-left: 2px solid black">第二联财务</td>
                    <td style="border-left: 2px solid black">第三联仓库</td>
                    <td style="border-left: 2px solid black">第四联供应商</td>
                    <td style="border-left: 2px solid black">第五联出门票</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <span style="font-size: 18px; font-weight: 100; margin-right: 20px"
            >领料</span
          >
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="font-size: 18px; font-weight: 100; margin-right: 20px"
            >发料</span
          >
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="font-size: 18px; font-weight: 100; margin-right: 20px"
            >发料部门主管</span
          ><br />
          <img
            style="
              width: 70px;
              display: flex;
              align-items: center;
              margin-left: 880px;
              margin-top: -560px; /* 向上移动 */
            "
            src="http://192.168.3.6:8030/assets/logo-icon-93e3e252.png"
          />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

          <div
            style="
              font-size: 17px;
              margin-bottom: 0px;
              width: 300px;
              font-weight: 600;
            "
          ></div>
        </div>
        <div style="margin-top: 500px; text-align: center">
          <div style="display: flex; justify-content: center; gap: 10px">
            <el-button size="small" @click="getPrintData()">打印</el-button>
            <el-button size="small" @click="close()">返回</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import request from "@/utils/request";
import { useRoute } from "vue-router";
import { getLodop } from "@/utils/LodopFuncs";
import { RootObject } from "./index";
import JsBarcode from "jsbarcode";
import QRCode from "qrcode";
import defaultSettings from "@/settings";
import { getTimeState, isWindow7 } from "@/utils/index";
// 1、name每个页面不能重复，2、路由在router.ts中添加，3、添加至路由白名单（permission.ts中whiteList）
defineOptions({
  name: "IframePrintDelivery",
  inheritAttrs: false,
});

// 打印模板全用div和span等原生html书写（确保打印格式不变）
// 样式全用行内style书写（确保样式生效）

const route = useRoute();
const window7 = ref(false);

// 打印数据，数组形式
const printData = ref<RootObject[]>([]);
const printDataone = ref<RootObject[]>([]);
const printDatatwo = ref<RootObject[]>([]);

// 定义二维码options
let barOptions = {
  fontSize: 14,
  height: 50,
  fontOptions: "bold",
  textAlign: "center",
  margin: 0,
  width: 2,
  font: "Microsoft YaHei",
  displayValue: false, //是否在条形码下方显示文字
};

// 获取打印数据
async function getPrintData() {
  const { data } = await request({
    url: `/mes/mesexteriordelivery/getprint/${route.query.id}`,
    method: "get",
    data: {},
  }).finally(() => {});
  console.log(data.mesProduceTransferFormDTOS);
  //printData.value = data.mesProduceTransferFormDTOS; //多张打印
  printData.value = data; //单张打印
  printDataone.value = data.printList;
  printDatatwo.value = data.printList;
  console.log(printDataone.value);
  window7.value = isWindow7();
  nextTick(() => {
    printData.value?.map(async (e) => {
      const qrCodeId = `barcode_${e?.id || ""}`;
      const qrCodeElement = document.getElementById(qrCodeId);

      if (qrCodeElement) {
        try {
          await QRCode.toCanvas(qrCodeElement, e.exteriorDeliveryCode || "", {
            width: 100, // 可以根据需要调整二维码的大小
            margin: 1, // 可以根据需要调整二维码的边距
          });
        } catch (err) {
          console.error("Error generating QR code:", err);
        }
      }
    });
  });
  setTimeout(() => {
    let LODOP = getLodop();
    LODOP.PRINT_INIT(`包装打印-${route.query.id}`);
    // LODOP.SET_LICENSES(
    //   defaultSettings.printCompany,
    //   defaultSettings.printLicenses,
    //   "",
    //   ""
    // );
    printData.value?.map((e) => {
      // printFun(e, LODOP);
      // printFun(e, LODOP);
      // printFun(e, LODOP);
      // printFun(e, LODOP);
      printFun(e, LODOP);
    });
    //LODOP.PRINT(); // 打印

    LODOP.PREVIEW(); // 预览
    window.parent.postMessage("打印中，请稍后...", "*");
    insertOperateLog(route.query.id);
  }, 1000);
}
//打印日志信息
const operateLog = ref({
  logLevel: "INFO",
  applicationName: "jcfk-mes",
  modular: "外协发货结束",
  businessType: "打印",
  info: "",
});
//结束打印
async function insertOperateLog(id: any) {
  operateLog.value.info = id;
  await request({
    method: "POST",
    url: "/system/sysOperateLog/insert",
    data: operateLog.value,
  });
}
function close() {
  window.history.back();
}

function printFun(pitem: RootObject, LODOP: any) {
  LODOP.SET_PRINT_PAGESIZE(2, "297mm", "210mm", "A4"); // 设置纸张类型（方向、宽度、高度、纸张类型名称）
  LODOP.SET_PRINT_STYLE("FontSize", 7.5);
  LODOP.SET_PRINT_STYLE("FontName", "cursive"); // 需要服务端机器安装同样字体，才能生效
  LODOP.ADD_PRINT_HTM(
    10,
    10,
    "200mm",
    "180mm",
    document.getElementById(`printId_${pitem?.id || ""}`)?.innerHTML
  );
  LODOP.ADD_PRINT_BARCODE(
    "160mm",
    "10mm",
    "25mm",
    "25mm",
    "QRCode",
    pitem?.exteriorDeliveryCode || ""
  );
  LODOP.ADD_PRINT_TEXT(700, 23, 98, 500, "委外加工出库单");
  LODOP.ADD_PRINT_LINE("19mm", "190mm", "19mm", "230mm", 0, 1);
  //打印预览false纵向
  LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", true);
  LODOP.NEWPAGE(); //另起一页
}

onMounted(async () => {
  // 数据字典表获取
  // await useDictStore.getDictionaryList();
  // 获取打印数据
  getPrintData();
});
</script>

<style lang="scss" scoped>
.app-container {
  height: inherit;
  overflow: scroll;
}
</style>
